import React from 'react';
import ReactDOM from 'react-dom';
import HttpRequest from '../HttpRequest.js';
//import WorkspaceListNav from './workspaceListNav.jsx';
import Input from "react-bootstrap/lib/Input";
import Modal from "react-bootstrap/lib/Modal";
import Button from "react-bootstrap/lib/Button";
import msgFrontAgent from  '../msgFrontAgent.js';
import validate from'../../../../common/validate.js'

var CreateWorkspaceDlg = React.createClass({
    getInitialState: function () {
        return {
            workspaces: [],
            open: false,
            allWorkspaces: [],
            project_id: this.props.project._id,
            url_validated: "disabled",
            urlDisplay: "none",
            submit_btn: true,
            cancel_btn: false
        };
    },
    componentWillReceiveProps (newProps){
        this.setState({
            project_id: newProps.project._id
        }, this.componentWillMount);
    },
    auto_focus(){
        let inputDom;
        let nameInputRef = this.refs["workspace_name"];
        if (nameInputRef) {
            inputDom = ReactDOM.findDOMNode(nameInputRef);
        }
        if (inputDom) {
            inputDom.childNodes[1].focus();
        }
    },
    componentWillMount: function () {
        HttpRequest.getAllWorkspaces().success(function (data) {
            if (data.code != 500) {
                this.setState({
                    allWorkspaces: data.data
                });
            }
        }.bind(this)).error(function (error) {
            toastr.error(null, "获取工作空间信息错误", {timeOut: 0});
        });
        HttpRequest.getCurrentUser().success(function (res) {
            if (res.code == 0) {
                this.setState({
                    current_user: res.data
                });
            }
        }.bind(this))
    },

    submit: function () {
        var workspace_name = this.refs.workspace_name.getValue();
        var project_id = this.state.project_id;
        var user = this.state.current_user;
        var that = this;
        var options = {
            work_name: workspace_name,
            project_id: project_id,
            userId: user.shortid,
            userName: user.loginname
        };

            HttpRequest.addWorkspace(options).success(function (res) {
                if (res.code == 200) {
                    toastr.success(null, "工作空间开始创建");
                    that.setState({
                        cancel_btn: true
                    });
                    msgFrontAgent.order(res.data.task_id, function (data) {
                        if (data.err) {
                            that.setState({
                                cancel_btn: false
                            });
                            toastr.error(null, data.err, {timeOut: 0});
                        } else {
                            toastr.success(null, data.body.msg);
                            that.cancel();
                        }
                    });
                } else {
                    that.setState({
                        cancel_btn: false
                    });
                    toastr.error(null, "工作空间创建错误");
                }

            }).error(function (error) {
                toastr.error(null, "工作空间创建错误");
            });

    },

    change: function () {
        this.refs['warning'].innerHTML = ("");
        this.setState({
            submit_btn: true
        });
        var thisOb = this;
        var project = this.state.project_id;
        var workspace_name = thisOb.refs['workspace_name'].getValue();
        if (!validate.notEmpty(workspace_name)) {
            thisOb.refs['warning'].innerHTML = ("工作空间名称不能为空！");

            return false;
        } else if (!validate.noSpacing(workspace_name)) {
            thisOb.refs['warning'].innerHTML = ("工作空间名称不能包含空格！");

            return false;
        } else if (!validate.variableNameFormat(workspace_name)) {
            thisOb.refs['warning'].innerHTML = ("工作空间名称3~30位，只允许包含数字、字母、'.'和'_',且不能以数字或'.'开头！");
            return false;
        }

        for (var index in  this.state.allWorkspaces) {
            if (this.state.allWorkspaces[index].work_name == thisOb.refs['workspace_name'].getValue() && this.state.allWorkspaces[index].project_id == project) {
                thisOb.refs['warning'].innerHTML = ("workspace" + name + "已经存在，请重新命名！");
                return false;
            }
        }
        this.setState({
            submit_btn: false
        });
    },
    select: function () {
        this.refs['warning'].innerHTML = ("");

        var selValue = this.refs.code_select.getValue();
        if (selValue == "1") {
            this.setState({
                urlDisplay: "block"
            }, this.change);
        } else {
            this.setState({
                urlDisplay: "none"
            }, this.change);
        }

    },
    handleOpen: function () {
        var that = this;
        this.setState({
            open: true
        }, function () {
            this.auto_focus();
             msgFrontAgent.onConnected(
                function () {
                    msgFrontAgent.order('create_workspace', function (data) {
                        if (data.err) {
                            that.refs['create_state'].style.color = "red";
                            that.refs['create_state'].innerHTML = data.err;
                        } else {
                            that.refs['create_state'].style.color = "blue";
                            that.refs['create_state'].innerHTML = data.body.msg;
                        }
                    });
             });
        });

    },
    cancel: function () {
        this.setState({
            open: false,
            urlDisplay: "none",
            submit_btn: true,
            cancel_btn: false
        });
    },
    render: function () {
        return (
            <div className="static-modal">
                <span ref="warning123" style={{fontSize:'5px',color:'red',marginBottom:'5px'}}/>
                <Modal show={this.state.open}>
                    <Modal.Header>
                        <Modal.Title>创建工作空间</Modal.Title>
                    </Modal.Header>

                    <Modal.Body>
                        <span ref="warning" style={{fontSize:'5px',color:'red',marginBottom:'5px'}}/>
                        <div>
                            <Input id="workspace_name" name="workspace_name" ref="workspace_name" type="text"
                                   bsSize="small" label="工作空间名称" onChange={this.change}/>
                        </div>
                    </Modal.Body>

                    <Modal.Footer>
                        <span ref="create_state" style={{float:"left",fontSize:'5px',color:'blue',marginBottom:'5px'}}/>
                        <Button ref="work_cancel"
                                id="work_cancel"
                                onClick={this.cancel}
                                disabled={this.state.cancel_btn}
                                bsStyle="primary"
                                style={{backgroundColor: "#555",borderColor: "#555",width:"70px",margin:'12'}}>取消</Button>
                        <Button id="work_submit"
                                onClick={this.submit}
                                primary={true}
                                disabled={this.state.submit_btn}
                                bsStyle="primary"
                                style={{backgroundColor: "#555",borderColor: "#555",width:"70px",margin:'12'}}>确定</Button>
                    </Modal.Footer>

                </Modal>
            </div>
        );
    }
});
module.exports = CreateWorkspaceDlg;